<template>
  <NewModal>
    <div class="test-modal-content">
      <h4>测试模态框</h4>
      <p>接收到的props：</p>
      <pre>{{ JSON.stringify(modalProps, null, 2) }}</pre>
      
      <div class="demo-section">
        <h5>测试功能：</h5>
        <div class="form-group">
          <label>输入一些数据：</label>
          <input 
            v-model="formData.message" 
            type="text" 
            placeholder="输入一些文字"
            class="demo-input"
          />
        </div>
        
        <div class="button-group">
          <button @click="handleConfirm" class="btn btn-primary">
            确认并返回数据
          </button>
          <button @click="handleCancel" class="btn btn-secondary">
            取消
          </button>
          <button @click="handleClose" class="btn btn-tertiary">
            直接关闭
          </button>
        </div>
      </div>
    </div>
  </NewModal>
</template>

<script setup>
import { ref } from 'vue';
import { useModalContext } from '../hooks/useModal';
import NewModal from './NewModal.vue';

// 使用新的hook获取模态框上下文
const { modalProps, confirm, cancel, close } = useModalContext();

// 本地表单数据
const formData = ref({
  message: '',
  timestamp: Date.now()
});

// 处理确认
const handleConfirm = () => {
  confirm({
    type: 'confirm',
    data: formData.value,
    message: '用户点击了确认'
  });
};

// 处理取消
const handleCancel = () => {
  cancel();
};

// 处理关闭
const handleClose = () => {
  close();
};
</script>

<style scoped>
.test-modal-content {
  padding: 10px;
}

.test-modal-content h4 {
  margin: 0 0 16px 0;
  color: #333;
}

.test-modal-content pre {
  background: #f5f5f5;
  padding: 12px;
  border-radius: 4px;
  font-size: 12px;
  max-height: 200px;
  overflow-y: auto;
  margin: 8px 0;
}

.demo-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #eee;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  margin-bottom: 4px;
  font-weight: 500;
  color: #555;
}

.demo-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
}

.demo-input:focus {
  outline: none;
  border-color: #40a9ff;
}

.button-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.btn {
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid;
  cursor: pointer;
  font-size: 12px;
}

.btn-primary {
  background: #1890ff;
  border-color: #1890ff;
  color: white;
}

.btn-secondary {
  background: white;
  border-color: #d9d9d9;
  color: #333;
}

.btn-tertiary {
  background: #ff4d4f;
  border-color: #ff4d4f;
  color: white;
}

.btn:hover {
  opacity: 0.8;
}
</style>